@extends('admin.main')

@section('content')
  <div class="wrapper wrapper-content animated fadeInRight">
  	<div class="m-b">
  		<a href="{{session('listUrl')}}" class="btn btn-default m-r"><i class="fa fa-arrow-left"></i> 返回列表</a>
  		<a href="javascript:;" onclick="addMembers()" class="btn btn-primary"><i class="fa fa-plus"></i> 添加…</a>
  	</div>
  	<div class="ibox">
  		<div class="ibox-title">
  			<h5>用户列表</h5>
  		</div>
  		<div class="ibox-content">
  			<ul id="UserList" class="list-unstyled list-inline">
  				@foreach($users as $user)
  				<li data-id="{{$user->id}}">
            <div class="text-center">
              <img alt="image" class="img-thumbnail m-t-xs img-responsive" src="{{get_avatar($user->id)}}" style="max-width:100px;" />
              <div class="m-t-xs font-bold">{{$user->realname}}</div>
              <p><button class="btn btn-white animation_select"><i class="fa fa-trash-o"></i> 移除</button></p>
            </div>
  				</li>
  				@endforeach
  			</ul>
  		</div>
  	</div>
  </div>
  <div id="bootstrapModal" class="modal fade"></div>
  <script id="tplAdduserPanel" type="text/html">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">添加成员</h4>
        </div>
        <div class="modal-body">
          <ul class="list-unstyled list-inline">
          	<%each users as row i%>
          	<li data-id="<%row.id%>">
  	          <div class="text-center">
  	            <img class="img-thumbnail m-t-xs img-responsive" src="<%row.avatar%>" style="max-width:100px;" />
  	            <div class="m-t-xs font-bold"><%row.realname%></div>
  	            <p><button class="btn btn-white animation_select"><i class="fa fa-plus"></i> 添加</button></p>
  	          </div>
  					</li>
  					<%/each%>
          </ul>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-power-off"></i> 关闭</button>
        </div>
      </div>
    </div>
  </script>
@endsection

@section('pagescript')
  <script src="{{asset('assets/models/roleModel.js')}}"></script>
  <script>
  	var artDialog, role_id='{{$id}}';
  	$("#side-menu li[rel='entrust']").addClass("active")
  		.find("ul").addClass("in")
  		.find("li[rel='1']").addClass("active");

  	$("#UserList").delegate('.animation_select', 'click', function(){
  		var obj = $(this).parents('li');
  		roleModel.removeUser({'id':role_id,'user_id':obj.data('id')}, function(){
  			obj.attr('class', 'animated rotateOutDownRight');
  			setTimeout(function(){obj.remove();}, 500);
  		}, failure);
  	});

  	$("#bootstrapModal").delegate('.animation_select', 'click', function(){
  		var that = this, obj = $(this).parents('li');
  		roleModel.addUser({'id':role_id, 'user_id':obj.data('id')}, function(){
  			$(that).html('<i class="fa fa-trash-o"></i> 移除');
  			$("#UserList").append($(that).parents('li'));
  		}, failure);
  	});

  	var addMembers = function(){
  		roleModel.getUsers({'id':role_id}, function(data){
  			$("#bootstrapModal").html(template('tplAdduserPanel', {'users':data})).modal();
  		}, failure);
  	};
  </script>
@endsection